<template>
  <div>
    <div class="action-bar">
      <el-button type="primary" size="mini" icon="el-icon-plus" @click="selectRelation">选择已有关系</el-button>
      <el-button type="primary" size="mini" icon="el-icon-plus" @click="add">新增关系</el-button>
    </div>
    <FormDialog title="新增关系" :show="dialogFormVisible" :append-to-body="true" width="40%" @on-ok="ok" @on-cancel="cancel">
      <EditForm ref="editForm" :instance-id="instanceId" @editRow="editRow" />
    </FormDialog>
    <SelectDialog title="选择已有关系" :append-to-body="true" :show="relationDialogFormVisible" @on-ok="selectRelationOk" @on-cancel="selectRelationCancel">
      <Relation ref="relationInstance" :for-selection="true" :multiple-selected="true" :instance-id="instanceId" />
    </SelectDialog>
  </div>
</template>
<script>
import FormDialog from '@neu/biz-core/components/FormDialog'
// 编辑实例组件独立编写，需要传递id属性，判断新建还是更新操作
import EditForm from './editForm'
import Relation from '@neu/dcom-ui/views/workOrder/forms/change/relation'
import SelectDialog from '@neu/biz-core/components/SelectDialog'
// import { create } from '@neu/dcom-ui/api/changeCiRelation'

export default {
  name: 'ChangeCiRelationActionBar',
  components: {
    FormDialog,
    EditForm,
    Relation,
    SelectDialog
  },
  props: {
    instanceId: {
      required: true,
      type: String
    }
  },
  data() {
    return {
      uploadDialogFormVisible: false,
      dialogFormVisible: false,
      relationDialogFormVisible: false
    }
  },
  methods: {
    // 新建用户按钮点击处理
    add() {
      this.dialogFormVisible = true
    },
    selectRelation() {
      this.relationDialogFormVisible = true
    },
    // 创建用户对话框确认事件处理
    ok() {
      // 直接调用表单实例的保存方法
      this.$refs.editForm.save().then(response => {
        if (response === false) return
        this.$message({
          showClose: true,
          message: '操作成功！',
          type: 'success'
        })
        // 调用pageable-table实例的mixin方法refresh()，更新表格
        // this.$parent.refresh()
        // 关闭对话框
        this.dialogFormVisible = false
        this.$refs.editForm.reset()
      })
    },
    cancel() {
      this.$refs.editForm.reset()
      this.dialogFormVisible = false
    },
    handleSuccess(response) {
      this.uploadDialogFormVisible = false
      this.$parent.refresh()
    },
    closeDialog() {
      this.uploadDialogFormVisible = false
      this.$parent.refresh()
    },
    selectRelationOk() {
      const selections = this.$refs.relationInstance.selections
      if (selections.length !== 1) {
        return this.$message({
          showClose: true,
          message: '只能选择一条关系',
          type: 'error'
        })
      } else {
        const data = {}
        data.desc = selections[0].desc
        data.src = selections[0].src._id
        data.srcDesc = selections[0].src.name
        data.dest = selections[0].dest._id
        data.destDesc = selections[0].dest.name
        data.rela = selections[0].rela._id
        data.relaDesc = selections[0].rela.desc
        data.relationId = selections[0]._id
        data.descChange = selections[0].desc
        data.deleteFlag = false
        data.addFlag = false
        const attrs = {}
        selections[0].attrs.forEach(a => {
          attrs[a.key] = a.value
        })
        data.attrs = attrs
        data.attrsChange = attrs

        this.$emit('addRow', data)

        // create(data).then(response => {
        //   this.relationDialogFormVisible = false
        //   this.$parent.refresh()
        // })
        this.relationDialogFormVisible = false
      }
    },
    selectRelationCancel() {
      this.relationDialogFormVisible = false
    },
    editRow(data) {
      this.$emit('addRow', data)
    }
  }

}
</script>
